import React from 'react';
import {Card,Spin, Icon, Alert} from 'antd';

export default class Loadings extends React.Component{
    render(){
        const icon = <Icon type="loading" style={{fontSize:28}}></Icon>;
        const iconLoading = <Icon type="loading" style={{fontSize:28}}></Icon>;
        return (
            <div>
                <Card title="Spin用法" className="card-wrap">
                    <Spin size="small" />
                    <Spin style={{margin:'0 20px'}} />
                    <Spin size="large" />
                    <Spin indicator={icon} style={{marginLeft:20}} spinning={true} />
                </Card>
                <Card title="内容遮罩" className="card-wrap">
                    <Alert
                        message="React"
                        description="欢迎来到React高级课程"
                        type="info"
                        style={{marginBottom:10}}
                    />
                    <Spin>
                        <Alert
                            message="React"
                            description="欢迎来到React高级课程"
                            type="info"
                            style={{marginBottom:10}}
                        />
                    </Spin>
                    <Spin tip="加载中...">
                        <Alert
                            message="React"
                            description="欢迎来到React高级课程"
                            type="warning"
                            style={{marginBottom:10}}
                        />
                    </Spin>
                    <Spin indicator={iconLoading}>
                        <Alert
                            message="React"
                            description="欢迎来到React高级课程"
                            type="error"
                            style={{marginBottom:10}}
                        />
                    </Spin>
                </Card>
            </div>
        );
    }
}